<template>

    <!-- 三种类型的插槽 -->
    <child>
        <!-- 默认插槽 -->
        <div>哈哈哈哈3423哈哈</div>
        <!-- 具名插槽 -->
         <template #solt2>
            <div>这是父组件向子组件具名插槽传递的内容</div>
         </template>
         <!-- 作用域插槽 
                子组件可通过作用域
         -->
          
         <template #solt3="{user}">
            <!-- 具名作用域插槽 -->
             <div>传过来的东西 {{ name = user.name }}</div>
         </template>
     </child>

     <!-- 动态插槽名 -->
     <div style="width: 150px;">
        <child>
       
            <template #[currentSoltName]="{user}">
                <!-- 具名作用域插槽 -->
                <div> {{ currentSoltName }}传过来的东西{{ user.name }}</div>
            </template>
        </child>
     </div>
     <button @click="soltNameChange">将东西传给下一个插槽</button>
</template>

<script setup lang="js">
import { onMounted, ref } from 'vue';
import child from './child.vue';

let name = '';

let index = ref(0);

let soltName = ["default","solt2","solt3","solt4"];
let currentSoltName = ref(soltName[0]);

function soltNameChange(){
    ++index.value;
    if(index.value == 3){
        index.value = 0;
    }
    currentSoltName.value = soltName[index.value];
    // location.reload();
}

onMounted(()=>{
    console.log("【name当前的值】", name);
})


</script>

<style lang="scss" scoped>
</style>